<template>
  <bui-page-layout ref="pageLayout" :is-z-paging="true">
    <view class="cardinfo-page">
      <u--form labelWidth="200rpx" labelPosition="top" :model="accountInfo" :rules="rules" ref="formInfo">
        <u-form-item required :label="mode==='wepay'?'微信名':'支付宝帐号'" prop="accountNo">
          <view class="input">
            <u--input v-model="accountInfo.accountNo" placeholder="请输入" border="none"></u--input>
          </view>
        </u-form-item>
        <u-form-item required label="填写姓名" prop="name">
          <view class="input">
            <u--input v-model="accountInfo.name" placeholder="请输入" border="none"></u--input>
          </view>
        </u-form-item>
        <u-form-item required :label="mode==='wepay'?'微信收款码':'支付宝收款码'" prop="accountImg">
          <view class="uploadImage">
            <image src="/static/image/icon-close.png" class="closeImage" @click="deleteImage(0)" v-if="accountInfo.accountImg"></image>
            <up-image :show-loading="true" width="240rpx" @click="imageZoom" height="240rpx" v-if="accountInfo.accountImg" :src="accountInfo.accountImg"></up-image>
            <u-upload width="240rpx" height="240rpx" v-else :fileList="fileList" @afterRead="afterRead" name="code" :maxCount="1">
              <view class="code-plus">
                <u-icon name="plus"></u-icon>
              </view>
            </u-upload>
          </view>
        </u-form-item>
      </u--form>
      <b-button :loading="buttonLoading" @change="submitInfo" style="margin-top: 30rpx;">
        <text class="button_t">保存提交</text>
      </b-button>
    </view>
  </bui-page-layout>
</template>
<script setup>
import { ref, reactive } from "vue";
import { onLoad, onReady } from "@dcloudio/uni-app";
import { globalStore } from "@/store";
const gStore = globalStore();
const buttonLoading = ref(false);
var rules = reactive({
  accountNo: {
    type: "string",
    required: true,
    message: "请填写账号",
    trigger: ["blur", "change"],
  },
  name: {
    type: "string",
    required: true,
    message: "请填写姓名",
    trigger: ["blur", "change"],
  },
  accountImg: {
    type: "string",
    required: true,
    message: "请上传收款码",
    trigger: ["change"],
  },
});
var accountInfo = ref({
  name: "",
  accountNo: "",
  accountImg: "",
  id: null,
});
var type = ref(null);
var mode = ref(null);
onLoad((options) => {
  mode.value = options.mode;
  type.value = options.type;
});
onReady(() => {
  const _info =
    gStore[
      mode.value === "alipay"
        ? "alipayInfo"
        : mode.value === "wepay"
        ? "wepayInfo"
        : ""
    ];
  if (_info) {
    accountInfo.value.id = _info.id;
    accountInfo.value.name = _info.name;
    accountInfo.value.accountNo = _info.accountNo;
    accountInfo.value.accountImg = _info.accountImg;
  }
  uni.setNavigationBarTitle({
    title:
      (type.value === "add" ? "添加" : "编辑") +
      (mode.value === "alipay" ? "支付宝付款" : "微信收款"),
  });
});
const imageZoom = () => {
  uni.previewImage({
    urls: [accountInfo.value.accountImg],
  });
};
const fileList = ref([]);
const formInfo = ref(null);
var cardInfo = ref({
  name: "",
});
const afterRead = async (event) => {
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  let lists = [].concat(event.file);
  let fileListLen = fileList.value.length;
  lists.map((item) => {
    fileList.value.push({
      ...item,
      status: "uploading",
      message: "上传中",
    });
  });
  for (let i = 0; i < lists.length; i++) {
    const result = await upLoadFile(lists[i].url);
    let item = fileList.value[fileListLen];
    accountInfo.value.accountImg = result;
    fileList.value.splice(fileListLen, 1, {
      ...item,
      status: "success",
      message: "",
      url: result,
    });
    fileListLen++;
  }
};
// 上传文件
const upLoadFile = (tempFilePaths) => {
  return new Promise((resolve, reject) => {
    var uploadTask = uni.uploadFile({
      url: uni.$serverUrl + "/m/upload",
      filePath: tempFilePaths,
      name: "file",
      header: {
        token: gStore.token,
      },
      success: (uploadFileRes) => {
        var _refData = JSON.parse(uploadFileRes.data);
        resolve(_refData.data); // 假设你想在成功时解决这个promise
      },
      fail: (error) => {
        reject(error); // 在失败时拒绝这个promise
      },
    });
    // 返回一个包含abort方法的对象
    return {
      abort: () => {
        uploadTask.abort();
      },
    };
  });
};
const submitPlayInfo = () => {
  var datainfo = {
    type: mode.value === "alipay" ? 2 : mode.value === "wepay" ? 1 : 3,
    ...accountInfo.value,
  };
  uni.$request
    .service({
      url: "/m/receive/account/save",
      method: "POST",
      data: datainfo,
    })
    .then((res) => {
      buttonLoading.value = false;
      uni.navigateBack({
        delta: 1,
      });
      uni.$emit("payBack");
    })
    .catch((error) => {
      buttonLoading.value = false;
      uni.$u.toast(error.message);
    });
};

const deleteImage = (index) => {
  accountInfo.value.accountImg = "";
  fileList.value.splice(index, 1);
};
const submitInfo = () => {
  formInfo.value
    .validate()
    .then(async (res) => {
      buttonLoading.value = true;
      submitPlayInfo();
    })
    .catch((errors) => {
      // uni.$u.toast("校验失败");
    });
};
</script>
<style lang="scss">
page {
  background-color: #f6f6f8;
}
.uploadImage {
  position: relative;
  height: 244rpx;
  height: 244rpx;
  border-radius: 16rpx;
  overflow: hidden;
  background-color: #fff;
}
.closeImage {
  position: absolute;
  right: 0;
  top: 0;
  width: 32rpx;
  height: 32rpx;
  z-index: 99;
  padding: 4rpx;
  border-radius: 0 0 0 16rpx;
  background-color: rgba($color: #000000, $alpha: 0.5);
}
.cardinfo-page {
  padding: 0 40rpx;
  .input {
    flex: 1;
    padding: 20rpx 20rpx;
    background-color: #fff;
    border: 2rpx solid #d3dce6;
    border-radius: 16rpx;
  }
}
.code-plus {
  border: 2rpx solid #d3dce6;
  border-radius: 16rpx;
  width: 240rpx;
  height: 240rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
.submit {
  background-color: #fe9900;
  display: flex;
  justify-content: center;
  border-radius: 16rpx;
  padding: 22rpx 0;
  margin-top: 30rpx;
  .t {
    font-size: 32rpx;
    color: #fff;
  }
}
</style>
